<template>
	<el-container>
		<el-aside width="23%">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model.trim="treeFilterText" clearable />
				</el-header>
				<el-main class="nopadding">
					<el-tree
						ref="treeRef"
						class="menu"
						node-key="id"
						:data="treeData"
						:current-node-key="''"
						:highlight-current="true"
						:expand-on-click-node="false"
						:filter-node-method="treeFilterNode"
						accordion
						@node-click="treeClick">
					</el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel"></div>
				<div class="right-panel">
					<div class="right-panel-search">
						<RangeDate @change="rangeDateChange" />
						<el-button-group class="ml-4">
							<el-button
								icon="el-icon-search"
								type="primary"
								:loading="isSearch1"
								:disabled="!reqParams.opCode"
								@click="search_daily"
								>按天统计</el-button
							>
							<el-button
								icon="el-icon-search"
								type="success"
								:loading="isSearch2"
								:disabled="!reqParams.opCode"
								@click="search_hourly"
								>按小时统计</el-button
							>
						</el-button-group>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<el-card shadow="never" style="width: 100%; height: 100%;">
					<scEcharts height="500px" :option="echartsOption"></scEcharts>
				</el-card>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import scEcharts from '@/components/scEcharts';
import RangeDate from "../../components/RangeDate";

export default {
    components: {
        scEcharts,
        RangeDate,
    },
    data() {
        return {
            isSearch1: false,
            isSearch2: false,
            treeFilterText: '',
            treeData: [],
            reqParams: {
                lineCode: '',
                opCode: '',
                startTime: '',
                endTime: '',
            },
            echartsOption: {
                title: {
                    text: '生产统计',
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        const tar = params[0]; // series 索引
                        return `${tar.name}`;
                    }
                },
                legend: {
                    formatter: function (name) {
                        switch (name) {
                            case 'pt301Count': return 'PT301';
                            case 'pt307Count': return 'PT307';
                            case 'pt311Count': return 'PT311';
                            default:
                                return name;
                        }
                    },
                },
                dataset: {
                    dimensions: ['time', 'pt301Count', 'pt307Count', 'pt311Count'],
                    source: [],
                },
                xAxis: {
                    type: 'category',
                    axisLabel: { rotate: -30 },
                },
                yAxis: {},
                series: [
                    {
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                    }, {
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                    }, {
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                    }
                ]
            },
        };
    },
    mounted() {
        this.initTree();
    },
    watch: {
        treeFilterText: {
            handler(newVal) {
                this.$refs.treeRef.filter(newVal);
            },
        },
    },
    methods: {
        //树过滤
        treeFilterNode(value, data) {
            if (!value) return true;
            return data.label.includes(value);
        },
        async initTree() {
            const resp = await this.$API.mdline.tree.get();
            if (resp.code != 200) {
                this.$message.error(resp.message);
                return;
            }
            this.treeData = resp.data;
        },
        async treeClick(node) {
            // 非叶子节点，清空数据
            if (!node.isLeaf) {
                this.reqParams.lineCode = '';
                this.reqParams.opCode = '';
                return;
            }

            this.reqParams.lineCode = node.parentValue;
            this.reqParams.opCode = node.value;

            // 清空数据
            this.echartsOption.dataset.source = [];
        },
        rangeDateChange(rangeDate) {
            if (rangeDate !== null) {
                this.reqParams.startTime = rangeDate[0];
                this.reqParams.endTime = rangeDate[1];
            }
        },
        async search_daily() {
            this.isSearch1 = true;
            const resp = await this.$API.reportproductivity.dailystat2.get(this.reqParams);
            this.isSearch1 = false;
            this.echartsOption.dataset.source = resp.data ?? [];
        },
        async search_hourly() {
            this.isSearch2 = true;
            const resp = await this.$API.reportproductivity.hourlystat2.get(this.reqParams);
            this.isSearch2 = false;
            this.echartsOption.dataset.source = resp.data ?? [];
        },
    }
}
</script>

<style scoped></style>
